<!--
 * @Description: 
 * @Author: 47
 * @Date: 2022-12-27 14:14:11
 * @LastEditors: 47
 * @LastEditTime: 2023-02-09 22:50:44
-->
<template>
    <div class="more-course">
      
        <!-- 导航栏 -->
        <van-nav-bar title="自选课程" left-arrow @click-left="onClickLeft" />
        <!-- 搜索框 -->
        <van-search v-model="value" shape="round" placeholder="搜索" />

        <!-- 横向标签页 -->
        <van-tabs v-model:active="active">
            <van-tab title="自选课程">
                <!-- 纵向分类选择 -->
                <van-tree-select
                    v-model:main-active-index="activeIndex"
                    height="503px"
                    :items="items"
                >
                <template #content>
                    <div class="all-course" v-if="activeIndex === 0">
                        <span class="msg-notice">此处课程限选<span style="color:red;">3</span>门课程，已选<span style="color:red;">0</span>门</span>

                        <!-- 课程列表 -->
                        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                          <van-list
                              v-model:loading="loading"
                              :finished="finished"
                              finished-text="没有更多了"
                              @load="onLoad"
                          >
                              <!-- 列表项1 -->
                              <div v-for="item in courseList" :key="item.course_id">
                                  <div class="course-item">
                                      <img :src="item.course_img" alt="">
                                      <div class="course-msg">
                                          <div class="title">{{ item.course_name }}</div>
                                          <div class="credit">学分  1.5 &nbsp;&nbsp;2022秋季自选</div>
                                      </div>
                                      <button class="save" @click="signUp(item.course_id)" v-if="item.course_status == '0'">报名</button>
                                      <button class="yet-save" v-if="item.course_status == '1'" disabled="true">已报名</button>
                                  </div>
                                  <van-divider />
                              </div>

                          </van-list>
                        </van-pull-refresh>
                        
                    </div>
                    <div class="school-course" v-if="activeIndex === 1">
                        <van-empty description="此分类下暂无课程" />
                    </div>
                </template>
                </van-tree-select>



            </van-tab>
        </van-tabs>

    </div>
</template>

<script setup>
import { ref,onMounted,computed } from 'vue';
import { Tab, Tabs,TreeSelect,Empty,List,showConfirmDialog,showNotify} from 'vant';

import 'vant/es/notify/style';

// 导入 course 仓库
import {useCourseStore} from '@/stores/course'
import { storeToRefs } from 'pinia';

// 实例化仓库对象
const course = useCourseStore()

// 解构 方法
const {getMoreCourseList,updateCourseStatus,addMyCourse} = course

// 解构 数据 想要是响应式就需要使用 storeToRefs
const {courseList} = storeToRefs(course)

// 组件挂载完毕渲染页面
onMounted(() => {
  getMoreCourseList()
})

// 点击报名弹出 Dialog 弹出框
const signUp  = (courseId) => {
  showConfirmDialog({
  message:
    '确定报名？',
})
  .then( async() => {
    console.log(courseId);
    try {
      // 修改课程状态
      await updateCourseStatus(courseId)
      // 更新页面
      await getMoreCourseList()
      // 将自选课添加到我的课程
      const data = {
        userId:1,
        courseId:courseId
      }
      await addMyCourse(data)
      // 成功通知
      showNotify({ type: 'success', message: '报名成功' });
    } catch (error) {
      alert(error.message)
    }
  })
  .catch(() => {
  });
}


//导航标签
const value = ref('')
const active = ref(0);
const activeIndex = ref(0);
const items = [
    { text: '全部' }, 
    { text: '本校课程' }
];

//控制列表
const list = ref([]);
const loading = ref(true);
const finished = ref(true);
const refreshing = ref(false);

const onLoad = () => {
    // setTimeout(() => {
    // if (refreshing.value) {
    //     list.value = [];
    //     refreshing.value = false;
    // }

    // for (let i = 0; i < 10; i++) {
    //     list.value.push(list.value.length + 1);
    // }
    // loading.value = false;

    // if (list.value.length >= 40) {
    //     finished.value = true;
    // }
    // }, 1000);
};

const onRefresh = () => {
    // 清空列表数据
    finished.value = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    onLoad();
};

const onClickLeft = () => {
  history.back()
}
</script>

<style scoped lang="less">
.more-course{
    :deep(.van-tree-select__nav){
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: auto;
    }
    .van-tree-select{
        margin-top: 10px;
    }
    .msg-notice{
        margin-left: 20px;
        color: #9e9e9e;
    }
    .van-list{
        margin-top: 15px;
        .course-item{
            display: flex;
            flex-flow: row;
            margin: 10px 10px;
            img{
                width: 50px;
                height: 50px;
                border-radius: 5px;

            }
            .course-msg{
                margin-left: 10px;
                .title{
                  width: 130px;
                }
                .credit{
                    margin-top: 10px;
                    font-size: 10px;
                    color: #c2c2c2;
                }

            }
            .yet-save,
            .save{
                background-color: white;
                border-radius: 1.86667vw;
                font-size: 14px;
                padding: 2px;
                // width: 41px;
                height: 20px;
                margin-left: 26px;
                border-style: solid;
            }
            .yet-save{
              color: #9e9e9e;
              border-color: #9e9e9e;
            }

            .save{
              color: #5bb0d9;
              border-color: #5bb0d9;
            }

        }

        .van-divider{
            border-color: #e0e0e0;
            margin: 15px 10px;
        }
    }


}
</style>
